<template>
  <div ref="el" id="map"></div>
  <div class="v"></div>
  <div class="h"></div>
</template>

<script setup>
import ZMapGl from "@/utils/ZMap.gl";
import { onMounted } from "vue";

const init = () => {
  const zMap = new ZMapGl("map", {
    center: [116.397428, 39.909189],
    zoom: 18,
  });
};

onMounted(() => {
  init();
});
</script>

<style>
#map {
  height: 100%;
  width: 100%;
  display: block;
}
.v {
  position: absolute;
  width: 2px;
  height: 100px;
  background: red;
  top: calc(50% - 50px);
  left: 50%;
  z-index: 99;
}
.h {
  position: absolute;
  height: 2px;
  width: 100px;
  background: red;
  top: 50%;
  left: calc(50% - 50px);
  z-index: 99;
}
</style>
